<template>
    <div class="viewport">
        <div class="row">
            <div class="col-lg-12 text-right">
                <button class="btn btn-danger" @click.prevent="add_show=true"> 新 增 用 户 </button>
            </div>
        </div>
        <div class="row form-horizontal">
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">指定用户</label>
                    <div class="col-sm-8">
                        <input type="text" class=" form-control" v-model="username" placeholder="不填时为搜索全部用户">
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <button class="btn btn-primary" @click="search()">按条件搜索</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="flex-list table-style table-striped-style">
                    <div class="flex-row title-row">
                        <div class="flex-1 flex-col">ID</div>
                        <div class="flex-2 flex-col">用户名</div>
                        <div class="flex-2 flex-col">真实姓名</div>
                        <div class="flex-2 flex-col">等级</div>
                        <div class="flex-4 flex-col">创建时间</div>
                        <div class="flex-2 flex-col">操作</div>
                    </div>
                    <div class="flex-list-body">
                        <template v-for="(user,i) in list">
                            <div class="flex-row" :key="user.id">
                                <div class="flex-1 flex-col">{{user.id}}</div>
                                <div class="flex-2 flex-col">{{user.name}}</div>
                                <div class="flex-2 flex-col">{{'无'}}</div>
                                <div class="flex-2 flex-col">{{user.fkLevel | levelStr}}</div>
                                <div class="flex-4 flex-col">{{user.createTime | cTimeStr}}</div>
                                <div class="flex-2 flex-col">
                                    <a href="###" @click.prevent="openEdit(user)">编辑</a>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="righttab-table-page clearfix">
                    <Paging v-model="pn" :total="total" :ps="ps"></Paging>
                </div>
            </div>
        </div>
        <AddUserModal :open="add_show" @close="add_show=false" @adddone="addDone"></AddUserModal>
        <EditUserModal :open="edit_show" :data-obj="curr_item" @close="editClose" @editdone="editDone"></EditUserModal>
    </div>
</template>
<script>
    import AddUserModal from '../components/user/AddUserModal.vue'
    import EditUserModal from '../components/user/EditUserModal.vue'
    import {tip,ajax} from '../tools/tools.js'
    import Paging from '../components/Paging.vue'

    export default {
        components: {
            Paging,AddUserModal,EditUserModal
        },
        data() {
            return {
                pn:1,
                ps:50,
                total:0,
                list:[],

                username:'',

                add_show:false,

                edit_show:false,
                curr_item:{}
            }
        },
        watch: {
            pn(v,ov){
                this.getList();
            }
        },
        filters:{
            levelStr(v){
                var sObj = {
                    '0':'客户',
                    '1':'会员'
                }

                return sObj[v];
            },
            cTimeStr(v){
                return new Date(parseInt(v)).toLocaleString();
            }
        },
        methods: {
            getList(innerCb){
                var self = this;
                var par = {};
                par.token = localStorage.token;
                par.pageSize = self.ps;
                par.pageNum = self.pn;
                if(self.username.trim().length>0){
                    par.username = self.username;
                }
                ajax.getUserList({
                    type:'post',
                    param:par,
                    cb(data){
                        self.list = data.datalist?data.datalist:[];
                        self.total = data.result==null?0:parseInt(data.result);
                    }
                })
            },
            search(){
                if(this.pn==1){
                    this.getList();
                } else {
                    this.pn = 1;
                }
            },
            openAdd(){
                this.add_show = true;
            },
            addDone(){
                this.add_show = false;
                this.getList();
            },
            openEdit(v){
                var self = this;
                self.edit_show = true;
                self.curr_item = v;
            },
            editClose(){
                var self = this;
                self.curr_item = {};
                self.edit_show = false;
            },
            editDone(){
                var self = this;
                self.editClose();
                this.getList();
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>
<style scoped>
    
</style>